<!-- 列表渲染指令:v-for -->

<script setup lang="ts">
import { ref } from 'vue'
// 循环数组
const pets = ref(['拉布拉多', '阿拉斯加', '柯基', '金毛', '哈士奇', '博美', '吉娃娃'])
// 循环对象
const person = {
  name: '星澜',
  age: 18,
  sex: '男',
}
</script>

<template>
  <div>
    <h1>星澜宠物店</h1>
    <ul>
      <!-- :key="item":每一项的标记，保证唯一 -->
      <li v-for="item in pets" :key="item">{{ item }}</li>
    </ul>
  </div>

  <div>
    <h1>星澜个人信息</h1>
    <!--{{ key }}: {{ value }}:键:值 -->
    <ul>
      <li v-for="(value, key) in person" :key="key">{{ key }}: {{ value }}</li>
    </ul>
  </div>

  <!-- 基于数据循环列表 -->
  <div>
    <h1>基于数据循环列表</h1>
    <ul>
      <li v-for="item in 10" :key="item"><button>我是按钮</button></li>
    </ul>
  </div>
</template>

<style scoped></style>
